<template>
  <div class="brand_page">
    <h3 class="tom_margin">新增商品</h3>
    <input type="button" class="btn btn-info" @click="add_product()" value="新增商品">
    <div class="row" style="margin-top:50px">
      <div class="col-md-2 good_box" v-for="(item,index) in goods_list">
        <div class="img_box row">
          <img :src="item.img_url" alt="" style="width:90%;">
        </div>

        <p class="good_tle price"> ￥{{ item.price }} </p>
        <p class="good_tle "> 链接：{{ item.goods_link }} </p>
        <p class="good_tle"> {{ item.name }} </p>
        <div class="row sku_f">
          <div class="sku_box" v-for="(sku_item,indexs) in item.sku" :key="indexs" @click="delete_sku(sku_item)">
            <img :src="sku_item.img_url" alt="" class="full-width">
          </div>
        </div>
        <p>
          <el-button type="primary" @click="add_sku(item)" size="small">新增sku</el-button>
          <!-- <el-button type="primary" @click="copy_is(item)" size="small">复制一个</el-button> -->
        </p>
        <p>
          <el-button type="danger" @click="delete_is(item)" size="small">删除</el-button>
          <el-button type="primary" @click="edit_is(item)" size="small">编辑</el-button>

        </p>

      </div>
    </div>
    <!--新增商品弹窗-->
    <el-dialog :title="dialog_tle" :visible.sync="dialog_show">
      <el-form enctype="multipart/form-data" id="uploadForm">
        <el-form-item label="选择图片" label-width="120px">
          <input type="file" name="product_img" id="add_img">
        </el-form-item>
        <el-form-item label="商品名称" label-width="120px">
          <el-input auto-complete="off" name="goods_name" v-model="form.goods_name" placeholder="输入商品名称"></el-input>
        </el-form-item>
        <el-form-item label="商品价格（元）" label-width="120px">
          <el-input auto-complete="off" name="goods_price" v-model="form.goods_price" placeholder="输入商品价格"></el-input>
        </el-form-item>
        <el-form-item label="商品链接" label-width="120px">
          <el-input auto-complete="off" name="goods_link" v-model="form.goods_link" placeholder="输入商品链接"></el-input>
        </el-form-item>
        <el-form-item label="所属分类" label-width="120px">
          <el-select placeholder="选择一级菜单" @change="change_menu()" v-model="select_option.selet_1">
            <el-option v-for="(item,index) in menu_option" :key="index" :label="item.label" :value="item.id"></el-option>
          </el-select>
          <el-select placeholder="选择二级菜单" v-model="select_option.selet_2">
            <el-option v-for="(item,index) in select_option.child_select" :key="index" :label="item.name" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialog_show = false">取 消</el-button>
        <el-button type="primary" @click="add_new()">确 定</el-button>
      </div>
    </el-dialog>
    <!--新增商品弹窗 end-->

    <!--新增sku弹窗 start-->
    <el-dialog title="新增sku" :visible.sync="sku_show">
      <sku-dialog :message="sku_mess" @sku_success="sku_success_func" />
    </el-dialog>
    <!--新增sku弹窗 end-->
  </div>
</template>
<script>
import g from '../../components/global.js'
import skuDialog from './sku_dialog'
export default {
  components: {
    skuDialog
  },
  data() {
    return {
      test_11: '9',
      menu_option: [],
      dialog_show: false,
      sku_show: false,
      dialog_tle: '新增商品',
      sku_mess: '',
      form: {
        goods_name: '',
        goods_price: '',
        goods_link: ''
      },
      productid: '',
      select_option: {
        selet_1: '',
        selet_2: '',
        child_menus: [],
        child_select: [],
        value: ''
      },
      goods_list: [],
      sku_list: []
    }
  },
  mounted() {
    this.get_sku()
    this.getProduct()
    this.get_menu()
  },
  methods: {
    copy_is(item) {
      console.log(item)
      $.ajax({
        type: 'post',
        url: g.res_url + '/api/v1/copy_goods',
        data: {
          good_item: item
        },
        success: function(data) {
          console.log(data)
        }
      })
    },
    get_sku() {
      var _this = this
      $.ajax({
        type: 'post',
        url: g.res_url + '/api.v1/get_sku',
        success: function(data) {
          _this.sku_list = JSON.parse(data).data
        }
      })
    },
    getProduct() {
      var _this = this
      $.ajax({
        type: 'post',
        url: g.res_url + '/api/v1/get_all_product',
        success: function(data) {
          var resData = JSON.parse(data).data
          var productList = []
          resData.forEach(v => {
            productList.push({
              id: v.id,
              name: v.name,
              img_url: v.img_url,
              price: v.price,
              goods_link: v.goods_link,
              class_id: v.class_id,
              sku: []
            })
          })
          productList.forEach(y => {
            _this.sku_list.forEach(x => {
              if (x.product_id == y.id) {
                y.sku.push(x)
              }
            })
          })
          _this.goods_list = productList
        },
        error: function() {
          _this.$message.error('网络错误')
        }
      })
    },

    add_product() {
      this.dialog_show = true
      $('#add_img').val('')
    },
    get_menu() {
      var _this = this
      $.ajax({
        type: 'post',
        url: g.res_url + '/api/v1/get_class',
        success: function(data) {
          var dataobj = JSON.parse(data)
          var parent_menu = []
          var child_menu = []
          dataobj.data.forEach(v => {
            if (v.parent_id == null) {
              parent_menu.push({
                id: v.id,
                label: v.name,
                children: []
              })
            } else {
              child_menu.push(v)
              _this.select_option.child_select.push({
                id: v.id,
                name: v.name
              })
            }
          })
          _this.menu_option = parent_menu
          parent_menu.forEach(x => {
            child_menu.forEach(y => {
              if (x.id == y.parent_id) {
                x.children.push({
                  id: y.id,
                  label: y.name
                })
              }
            })
          })
          _this.treeData = parent_menu
          _this.child_menus = child_menu
        }
      })
    },
    change_menu() {
      var _this = this
      _this.select_option.child_select = []
      var sele_data = _this.select_option.selet_1
      _this.child_menus.forEach(v => {
        if (v.parent_id == sele_data) {
          _this.select_option.child_select.push(v)
        }
      })
    },
    add_new() {
      var _this = this
      _this.dialog_tle = '新增商品'
      var formData = new FormData($('#uploadForm')[0])

      var sele2 = _this.select_option.selet_2
      if (sele2 == '') {
        sele2 = _this.select_option.selet_1
      }
      formData.append('class_id', sele2)
      if (!_this.productid == '') {
        formData.append('product_id', _this.productid)
      }
      formData.append('edit_img', $('#add_img')[0].files[0])
      $.ajax({
        url: g.res_url + '/api/v1/save_product',
        data: formData,
        type: 'POST',
        data: formData,
        async: false,
        cache: false,
        contentType: false,
        processData: false,
        success: function(data) {
          if (data == 'success') {
            _this.$message.success('操作成功')
            _this.getProduct()
          } else {
            _this.$message.error('操作失败')
          }
        },
        error: function() {
          _this.$message.error('网络繁忙')
        }
      })
      _this.dialog_show = false
      _this.productid = ''
    },
    delete_is(item) {
      var _this = this
      $.ajax({
        type: 'post',
        url: g.res_url + '/api/v1/del_product',
        data: {
          product_id: item.id
        },
        success: function(data) {
          if (data == 'success') {
            _this.$message.success('操作成功')
            _this.get_sku()
            _this.getProduct()
          } else {
            _this.$message.error('操作失败')
          }
        },
        error: function() {
          _this.$message.error('网络繁忙')
        }
      })
    },
    edit_is(row) {
      var _this = this
      $('#add_img').val('')
      _this.dialog_show = true
      _this.dialog_tle = '编辑商品'
      _this.productid = row.id
      _this.form.goods_name = row.name
      _this.form.goods_price = row.price
      _this.form.goods_link = row.goods_link
      _this.select_option.selet_2 = row.class_id
      $.ajax({
        type: 'post',
        url: g.res_url + '/api/v1/get_class_name',
        data: {
          classs_id: row.class_id
        },
        success: function(data) {
          var dataobj = JSON.parse(data).data
          _this.select_option.selet_1 = dataobj.p_class_id
        },
        error: function() {
          _this.$message.error('网络繁忙')
        }
      })
    },
    add_sku(item) {
      this.sku_show = true
      this.sku_mess = item.id
    },
    delete_sku(item) {
      var _this = this
      _this
        .$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
        .then(() => {
          $.ajax({
            type: 'post',
            url: g.res_url + '/api/v1/del_sku',
            data: {
              sku_id: item.id
            },
            success: function(data) {
              if (data == 'success') {
                _this.$message.success('操作成功')
                _this.get_sku()
                _this.getProduct()
              } else {
                _this.$message.error('操作失败')
              }
            },
            error: function() {
              _this.$message.error('网络繁忙')
            }
          })
          _this.$message({
            type: 'success',
            message: '删除成功!'
          })
        })
        .catch(() => {
          _this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },
    sku_success_func(item) {
      this.sku_show = false
      this.get_sku()
      this.getProduct()
    }
  }
}
</script>
<style scoped>
.row_height {
  height: 150px !important;
  margin: 28px 0;
}
.tom_margin {
  margin-bottom: 10px;
  margin-top: 30px;
}
.del_btn {
  margin: 20px 0 80px 20px;
}
.sku_box {
  cursor: pointer;
}
.sku_box img {
  margin: 10px 0;
  float: left;
  width: 15%;
}
.tle {
  font-size: 32px;
  color: #007cd5;
}
.good_tle {
  color: #333;
  overflow: hidden;
  text-overflow: ellipsis;
  -o-text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%;
}
.sku_f {
  height: 40px;
  overflow: hidden;
  margin: 5px 0 10px 0 !important;
}
.sku_box img {
  margin: 0px 2px;
  float: left;
  width: 15%;
  overflow: hidden;
  border: 1px solid #999;
}
.price {
  color: #0080d2;
  font-weight: 600;
  font-size: 18px;
}
.img_box {
  height: 200px;
  overflow: hidden;
}
.full-width {
  display: block;
  width: 100%;
}
.head_tle {
  margin-top: 50px !important;
}
</style>

